<template>
	<view class="contentBox">
		<view class="content">
			<view class="title">{{yearDay}}</view>
			<view class="xingqi">
				<view class="items" v-for="item in week">{{item}}</view>
			</view>
			<view class="date">
				<view class="items" v-for="item in airBlock"></view>
				<view class="items" v-for="(item,index) in this.monthAllDay" :key="item+index" 
				:class="item.IsSigan ? 'active' : ''"
				>
					{{item.day}}
					<image v-if="item.IsSigan" src="../../static/img/icon_signIn.png"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				week: ["日", "一", "二", "三", "四", "五", "六"],
				yearDay:'',
				airBlock:[],
				toDay:'',
				monthAllDay:[]
			};
		},
		created(){
			this.getCurrent();
		},
		mounted(){
		},
		methods:{
			//获取当前日期+月份+年份+日+星期+一个月第一天星期几+一个月多少日
			getCurrent() {
				var cur = new Date()	
				var year = cur.getFullYear();		//年
				var month = cur.getMonth() +1;		//月
				
				var day = cur.getDate();			//日
				var weekDay = cur.getDay();			//星期几
				
				var monthAllDay = this.mGetDate(year,month);			// 一个月有多少日
				var monthDay = year+','+ month+',01';
				var monthFirstDay = new Date(monthDay).getDay();	//一个月的第一天 是星期几
				
				var list = [];
				for(let i = 0;i < monthAllDay;i++){
					let obj = {
						day:i+1,
						IsSigan:false
					}
					list.push(obj);
				}
				this.monthAllDay = list;
				this.airBlock.length = 6 - monthFirstDay;
				this.yearDay = year+'年'+month+'月';
				this.toDay = day;
			},
			// 获取当前月份的天数
			mGetDate(year, month){
			    var d = new Date(year, month, 0);
			    return d.getDate();
			},
			IsSign(){
				this.monthAllDay[this.toDay-1].IsSigan = true;
			}
		}
	}
</script>

<style lang="scss">
	.title{
		text-align: center;
		font-weight: bold;
		padding: 24upx 0;
	}
	.active{
		font-size: 30upx;
		// background: linear-gradient(20deg, #fe5900, #fefefe);
		font-weight: bold;
	}
.contentBox{
	padding: 30rpx;
	margin-top: -500rpx;
	.content{
		background-color: #FFFFFF;
		box-shadow: 5rpx 5rpx 20rpx #E0E0E0;
		height: 600rpx;
	    border-radius: 20rpx;
		padding: 30rpx;
		.xingqi{
			display: flex;
			.items{
				text-align: center;
				flex: 1;
				padding: 20rpx 0;
			}
		}
		.date{
			display: flex;
			flex-wrap: wrap;
			.items{
				flex-basis: 14.28%;
				text-align: center;
				padding: 20rpx 0;
				position: relative;
				image{
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
				}
			}
		}
	}
}
</style>
